<template>
	<view class="add-address-container">
		<!-- 表单区域 -->
		<view class="form-section">
			<!-- 收货人 -->
			<view class="form-item">
				<view class="form-label">收货人</view>
				<view class="form-input-wrapper">
					<input 
						class="form-input" 
						placeholder="请填写收货人姓名" 
						v-model="formData.name"
						maxlength="20"
					/>
					<view class="contact-icon">
						<uni-icons type="person-add" size="20" color="#999999"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 手机号 -->
			<view class="form-item">
				<view class="form-label">手机号</view>
				<view class="form-input-wrapper">
					<input 
						class="form-input" 
						placeholder="请填写收货人手机号" 
						v-model="formData.phone"
						type="number"
						maxlength="11"
					/>
				</view>
			</view>
			
			<!-- 所在地区 -->
			<view class="form-item">
				<view class="form-label">所在地区</view>
				<view class="form-input-wrapper" @click="selectRegion">
					<text class="region-text" :class="{ 'placeholder': !formData.region }">
						{{ formData.region || '请选择所在地区' }}
					</text>
					<uni-icons type="right" size="16" color="#999999"></uni-icons>
				</view>
			</view>
			
			<!-- 详细地址 -->
			<view class="form-item">
				<view class="form-label">详细地址</view>
				<view class="form-input-wrapper">
					<textarea 
						class="form-textarea" 
						placeholder="如街道、楼牌号等" 
						v-model="formData.detailAddress"
						maxlength="100"
					></textarea>
				</view>
			</view>
		</view>
		
		<!-- 默认地址设置 -->
		<view class="default-section">
			<view class="form-item">
				<view class="form-label">设为默认收货地址</view>
				<view class="form-input-wrapper">
					<switch 
						:checked="formData.isDefault" 
						@change="onDefaultChange"
						color="#07c160"
					></switch>
				</view>
			</view>
		</view>
		
		<!-- 保存按钮 -->
		<view class="save-btn" @click="saveAddress">
			<text class="save-text">保存</text>
		</view>
		
		<!-- 地区选择器 -->
		<RegionPicker 
			:visible="showRegionPicker" 
			:value="formData.region"
			@cancel="onRegionCancel"
			@confirm="onRegionConfirm"
		/>
	</view>
</template>

<script>
	import RegionPicker from '@/components/RegionPicker/RegionPicker.vue'
	import shippingAddressApi from '@/utils/api/shippingAddress.js'
	
	export default {
		components: {
			RegionPicker
		},
		data() {
			return {
				showRegionPicker: false,
				formData: {
					name: '',
					phone: '',
					region: '',
					detailAddress: '',
					isDefault: true
				}
			}
		},
		methods: {
			selectRegion() {
				// 显示地区选择器
				this.showRegionPicker = true;
			},
			
			onRegionCancel() {
				this.showRegionPicker = false;
			},
			
			onRegionConfirm(region) {
				this.formData.region = region;
				this.showRegionPicker = false;
			},
			
			onDefaultChange(e) {
				this.formData.isDefault = e.detail.value
			},
			async saveAddress() {
				// 表单验证
				if (!this.formData.name.trim()) {
					uni.showToast({
						title: '请填写收货人姓名',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.phone.trim()) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return
				}
				
				if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.region) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.detailAddress.trim()) {
					uni.showToast({
						title: '请填写详细地址',
						icon: 'none'
					})
					return
				}
				
				try {
					uni.showLoading({ title: '保存中...' })
					
					// 解析地区信息
					const regionParts = this.formData.region.split(' ')
					const addressData = {
						receiver_name: this.formData.name,
						receiver_phone: this.formData.phone,
						province: regionParts[0] || '',
						city: regionParts[1] || '',
						district: regionParts[2] || '',
						street: this.formData.detailAddress,
						is_default: this.formData.isDefault ? 1 : 0
					}
					
					// 调用新增地址接口
					const result = await shippingAddressApi.addAddress(addressData)
					
					if (result.success) {
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				} catch (error) {
					console.error('保存地址失败:', error)
				} finally {
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.add-address-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.form-section {
		background-color: #ffffff;
		margin-bottom: 20rpx;
		
		.form-item {
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.form-label {
				width: 160rpx;
				font-size: 28rpx;
				color: #333333;
			}
			
			.form-input-wrapper {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.form-input {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					height: 40rpx;
					line-height: 40rpx;
				}
				
				.form-textarea {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					min-height: 80rpx;
					line-height: 1.5;
				}
				
				.region-text {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					
					&.placeholder {
						color: #999999;
					}
				}
				
				.contact-icon {
					margin-left: 20rpx;
				}
			}
		}
	}
	
	.default-section {
		background-color: #ffffff;
		margin-bottom: 20rpx;
		
		.form-item {
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			
			.form-label {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
			}
			
			.form-input-wrapper {
				display: flex;
				align-items: center;
			}
		}
	}
	
	.save-btn {
		position: fixed;
		bottom: 40rpx;
		left: 40rpx;
		right: 40rpx;
		height: 88rpx;
		background-color: #ff4444;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.save-text {
			color: #ffffff;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
}
</style>
